CSS Media Queries
CSS மீடியா வினவல்கள் ஒரு சாதனம் அல்லது வலைப்பக்கத்தைக் காட்சிப்படுத்தும் சூழலின் பண்புகளின் அடிப்படையில் பாணிகளைப் பயன்படுத்த உங்களை அனுமதிக்கின்றன.
CSS மீடியா வினவல்கள் பதிலளிக்கக்கூடிய வலைப் பக்கங்களை உருவாக்க அவசியமானவை.
CSS @media விதி உங்கள் பாணி தாளில் மீடியா வினவல்களைச் சேர்க்கப் பயன்படுகிறது.
Media Query Syntax
ஒரு மீடியா வினவல் ஒரு விருப்பமான மீடியா-வகை மற்றும் ஒன்று அல்லது அதற்கு மேற்பட்ட மீடியா-அம்சங்களைக் கொண்டுள்ளது, அவை true அல்லது false க்கு தீர்க்கப்படும்.
@media [not] media-type and (media-feature: value) and (media-feature: value) {
/* பயன்படுத்த வேண்டிய CSS விதிகள் */
}மீடியா-வகை விருப்பமானது. இருப்பினும், நீங்கள் not பயன்படுத்தினால், நீங்கள் ஒரு மீடியா-வகையையும் குறிப்பிட வேண்டும்.
குறிப்பிடப்பட்ட மீடியா-வகை சாதனத்தின் வகையுடன் பொருந்தினால், மற்றும் அனைத்து மீடியா-அம்சங்களும் true என்றால், ஒரு மீடியா வினவலின் முடிவு true ஆகும். ஒரு மீடியா வினவல் true ஆக இருக்கும்போது, தொடர்புடைய பாணி விதிகள் பயன்படுத்தப்படும், சாதாரண அடுக்கு விதிகளைப் பின்பற்றுகிறது.
not மற்றும் and முக்கிய சொற்களின் அர்த்தம்:
- not: இந்த விருப்பமான முக்கியச் சொல் முழு மீடியா வினவலின் அர்த்தத்தைத் தலைகீழாக மாற்றுகிறது.
- and: இந்த முக்கியச் சொல் ஒரு மீடியா-வகை மற்றும் ஒன்று அல்லது அதற்கு மேற்பட்ட மீடியா-அம்சங்களை இணைக்கிறது.
CSS Media Types
விருப்பமான மீடியா வகை பாணிகள் எந்த வகை ஊடகத்திற்கானவை என்பதைக் குறிப்பிடுகிறது. மீடியா வகை தவிர்க்கப்பட்டால், அது "all" என அமைக்கப்படும்.
| Value | Description |
|---|---|
| all | அனைத்து மீடியா வகை சாதனங்களுக்கும் பயன்படுத்தப்படுகிறது |
| அச்சு முன்னோட்ட பயன்முறைக்குப் பயன்படுத்தப்படுகிறது | |
| screen | கணினி திரைகள், டேப்லெட்டுகள் மற்றும் ஸ்மார்ட்போன்களுக்குப் பயன்படுத்தப்படுகிறது |
CSS Media Features
மீடியா அம்சம் சாதனத்தின் ஒரு குறிப்பிட்ட பண்புகளைக் குறிப்பிடுகிறது.
பொதுவாகப் பயன்படுத்தப்படும் சில மீடியா அம்சங்கள் இங்கே:
| Value | Description |
|---|---|
| max-height | வியூபோர்ட்டின் அதிகபட்ச உயரம் |
| min-height | வியூபோர்ட்டின் குறைந்தபட்ச உயரம் |
| height | வியூபோர்ட்டின் உயரம் (உருள் பட்டையை உள்ளடக்கியது) |
| max-width | வியூபோர்ட்டின் அதிகபட்ச அகலம் |
| min-width | வியூபோர்ட்டின் குறைந்தபட்ச அகலம் |
| width | வியூபோர்ட்டின் அகலம் (உருள் பட்டையை உள்ளடக்கியது) |
| orientation | வியூபோர்ட்டின் நோக்குநிலை (இடநிலை அல்லது செங்குத்து) |
| resolution | திரை தீர்மானம் |
| prefers-color-scheme | பயனரின் விருப்பமான நிறத் திட்டம் (வெளிர் அல்லது கருப்பு) |
Media Queries Examples
Media Query Demo
இந்த பெட்டியின் நிறம் மற்றும் உரை அளவு திரையின் அகலத்தின் அடிப்படையில் மாறுகிறது:
- 480px க்கும் குறைவாக: சிவப்பு பின்னணி
- 480px - 768px: நீல பின்னணி
- 768px க்கும் மேல்: ஊதா பின்னணி
- 480px க்கும் மேல்: பச்சை பின்னணி
திரையின் அகலத்தை மாற்றி விளைவைக் காணவும்!
Example 1: min-width
வியூபோர்ட்டின் அகலம் 480px அல்லது அதிகமாக இருந்தால், உடலின் பின்னணி நிறத்தை lightgreen ஆக மாற்ற ஒரு மீடியா வினவலைப் பயன்படுத்துகிறோம்:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Example 2: min-width and max-width
வியூபோர்ட்டின் அகலம் 480px மற்றும் 768px க்கு இடையில் இருந்தால், உடலின் பின்னணி நிறத்தை lightgreen ஆக மாற்ற ஒரு மீடியா வினவலைப் பயன்படுத்துகிறோம்:
@media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: lightgreen;
}
}